<!DOCTYPE html>
<html>
<head>
  <title>Traversal Rule test document</title>
  <meta charset="utf-8" />
  <script>
    var frameContents = '<html>' +
      '<head><title>such app</title></head>' +
      '<body>' +
      '<h1>wow</h1>' +
      '<ul>' +
      '<li><label><input type="checkbox">many option</label></li>' +
      '</ul>' +
      '<label for="r">much range</label>' +
      '<input min="0" max="10" value="5" type="range" id="r">' +
      '</body>' +
      '</html>';

    function showAlert() {
      document.getElementById('alert').hidden = false;
    }

    function hideAlert() {
      document.getElementById('alert').hidden = true;
    }

    function ariaShowBack() {
      document.getElementById('back').setAttribute('aria-hidden', false);
    }

    function ariaHideBack() {
      document.getElementById('back').setAttribute('aria-hidden', true);
    }

    function ariaShowIframe() {
      document.getElementById('iframe').setAttribute('aria-hidden', false);
    }

    function ariaHideIframe() {
      document.getElementById('iframe').setAttribute('aria-hidden', true);
    }

    function renameFruit() {
      document.getElementById('fruit').setAttribute('aria-label', 'banana');
    }

    function renameSlider() {
      document.getElementById('slider').setAttribute(
        'aria-label', 'mover');
    }

    function changeSliderValue() {
      document.getElementById('slider').setAttribute('aria-valuenow', '5');
      document.getElementById('slider').setAttribute(
        'aria-valuetext', 'medium');
    }

    function toggleLight() {
      var lightSwitch = document.getElementById('light');
      lightSwitch.setAttribute('aria-checked',
        lightSwitch.getAttribute('aria-checked') === 'true' ? 'false' : 'true');
    }

  </script>
  <style>
    #windows {
      position: relative;
      width: 320px;
      height: 480px;
    }

    #windows > iframe {
      z-index: 1;
    }

    #windows > div[role='dialog'] {
      z-index: 2;
      background-color: pink;
    }

    #windows > * {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    iframe {
      width: 100%;
      height: 100%;
    }

  </style>

</head>
<body>
  <div>Phone status bar</div>
  <div id="windows">
    <button id="back">Back</button>
    <div role="dialog" id="alert" hidden>
      <h1>This is an alert!</h1>
      <p>Do you agree?</p>
      <button onclick="setTimeout(hideAlert, 500)">Yes</button>
      <button onclick="hideAlert()">No</button>
    </div>
    <div id="appframe"></div>
  </div>
  <button id="home">Home</button>
  <button id="fruit" aria-label="apple"></button>
  <span id="light" role="switch" aria-label="Light" aria-checked="false" onclick="toggleLight()"></span>
  <div id="live" aria-live="polite" aria-label="live">
    <div id="slider" role="slider" aria-label="slider" aria-valuemin="0"
      aria-valuemax="10"  aria-valuenow="0"></div>
  </div>
</body>
</html>
